<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>5725宿舍生活网站-宿舍介绍</title>
		<style>
			/* 全局样式 */
			body {
				font-family: '微软雅黑', sans-serif;
				margin: 0;
				padding: 0;
				background-color: #f4f4f4;
				color: #333;
			}

			/* 头部样式 */
			header {
				background-color: #00f7ff;
				padding: 10px 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			header .logo {
				font-family: '手写体', cursive;
				font-size: 24px;
				color: #fff;
			}

			nav ul {
				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
			}

			nav ul li {
				margin-left: 20px;
			}

			nav ul li a {
				text-decoration: none;
				color: #fff;
				font-size: 18px;
			}

			/* Banner样式 */
			.banner .slider {
				display: flex;
				overflow: hidden;
			}

			.banner .slider img {
				width: 100%;
				height: auto;
			}

			/* 主要内容区域样式 */
			.main-content {
				padding: 20px;
			}

			.main-content h2 {
				font-family: '卡通字体', cursive;
				color: #333;
			}

			.gallery {
				display: flex;
				gap: 10px;
			}

			.gallery img {
				width: 48%;
				height: auto;
			}

			/* 底部样式 */
			footer {
				background-color: #333;
				color: #fff;
				text-align: center;
				padding: 10px 0;
				margin-top: 20px;
			}

			/* 新增互动功能样式 */
			.interaction-section {
				margin: 20px 0;
				padding: 20px;
				background-color: white;
				border-radius: 8px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.vote-options {
				display: flex;
				gap: 15px;
				margin: 15px 0;
				flex-wrap: wrap;
			}

			.message-board {
				margin-top: 20px;
			}

			.message-item {
				border-bottom: 1px solid #eee;
				padding: 15px;
				margin: 10px 0;
				background-color: #fff;
				border-radius: 5px;
			}

			.message-author {
				color: #ffa500;
				font-weight: bold;
				margin-bottom: 5px;
			}

			.results-bar {
				height: 20px;
				background-color: #eee;
				border-radius: 10px;
				margin: 10px 0;
				overflow: hidden;
			}

			.results-fill {
				height: 100%;
				background-color: #ffa500;
				transition: width 0.3s ease;
			}

			#messageForm {
				display: flex;
				flex-direction: column;
				gap: 10px;
				max-width: 600px;
			}

			#author,
			#message {
				padding: 10px;
				border: 1px solid #ddd;
				border-radius: 4px;
				font-size: 16px;
			}

			#message {
				height: 100px;
				resize: vertical;
			}

			button {
				background-color: #ffa500;
				color: white;
				border: none;
				padding: 10px 20px;
				border-radius: 5px;
				cursor: pointer;
				font-size: 16px;
				transition: background-color 0.3s;
			}

			button:hover {
				background-color: #ff8c00;
			}
		</style>
	</head>
	<body>
		<header>
			<div class="logo">5725宿舍生活网站-宿舍介绍</div>
			<nav>
				<ul>
					<li><a href="sy.html">首页</a></li>
					<li><a href="ssjs.html">宿舍介绍</a></li>
					<li><a href="sssh.html">宿舍生活</a></li>
					<li><a href="gywm.html">关于我们</a></li>
				</ul>
			</nav>
		</header>

		<section class="banner">
			<div class="slider">

				<!--            <img src="banner2.jpg" alt="室友合照" class="slider-img">
            <img src="banner3.jpg" alt="精彩活动" class="slider-img"> -->
			</div>
		</section>

		<section class="main-content">
			<h2>宿舍简介</h2>
			<p><i>温馨的宿舍，温暖的家</i></p>
			<p>欢迎来到我们的宿舍！这里是大学生们在校园生活中的第二个家。每一间宿舍都经过精心设计，旨在为同学们提供一个舒适、便捷且充满归属感的生活空间。在这里，你不仅能找到学习的安静角落，还能与室友共享欢乐时光。</p>
			<img src="banner2.jpg" alt="宿舍环境" class="slider-img">



			<h2>宿舍设施</h2>
			<p><i>完善的设施，便捷的生活</i></p>
			<p>我们的宿舍配备了齐全的设施，满足日常生活需求。每间宿舍都设有独立的卫生间和淋浴设施，在一天的学习后能够轻松洗去疲惫。宽敞的储物空间方便整理个人物品，而高速的网络连接则随时与外界保持联系。此外，宿舍还配备了空调和暖气，确保你在任何季节都能享受舒适的居住环境。</p>
			<img src="moment2.jpg" alt="宿舍生活" class="slider-img">

			<h2>宿舍设施</h2>
			<p><i>优美的环境，和谐的氛围</i></p>
			<p>走进我们的宿舍，你会感受到一种宁静而和谐的氛围。宿舍楼内干净整洁，走廊宽敞明亮，公共区域布置得温馨舒适。我们还设置了休闲区域，配备了桌椅和绿植，让你在课余时间可以放松身心，与室友交流学习心得。此外，宿舍周边环境优美，绿树成荫，是学习和生活的理想场所。</p>
			<img src="moment1.jpg" alt="宿舍生活" class="slider-img">

			<!-- 投票功能 -->
			<div class="interaction-section">
				<h2>本周活动投票</h2>
				<div class="vote-options">
					<label>
						<input type="radio" name="vote" value="聚餐"> 周末聚餐
					</label>
					<label>
						<input type="radio" name="vote" value="电影"> 电影之夜
					</label>
					<label>
						<input type="radio" name="vote" value="游戏"> 桌游大赛
					</label>
				</div>
				<button onclick="submitVote()">立即投票</button>
				<div id="voteResults"></div>
			</div>

			<!-- 留言板功能 -->
			<div class="interaction-section message-board">
				<h2>留言板</h2>
				<form id="messageForm" onsubmit="return submitMessage(event)">
					<input type="text" id="author" placeholder="你的昵称（必填）" required>
					<textarea id="message" placeholder="留下你的祝福或建议...（必填）" required></textarea>
					<button type="submit">发布留言</button>
				</form>
				<div id="messagesContainer"></div>
			</div>

			<h2>友情链接</h2>
			<ul>
				<li><a href="https://hceb.edu.cn/">学校网站</a></li>
				<li><a href="https://bilibili.com/">bilibili</a></li>
			</ul>
		</section>

		<footer>
			<p>&copy; 2025 宿舍生活. 版权所有.</p>
			<p>联系方式: dormlife@example.com</p>
		</footer>

		<script>
			// 初始化本地存储
			let votes = JSON.parse(localStorage.getItem('votes')) || {
				聚餐: 0,
				电影: 0,
				游戏: 0
			};
			let messages = JSON.parse(localStorage.getItem('messages')) || [];

			// 投票功能
			function submitVote() {
				const selected = document.querySelector('input[name="vote"]:checked');
				if (!selected) return alert('请先选择投票选项！');

				votes[selected.value]++;
				localStorage.setItem('votes', JSON.stringify(votes));
				updateResults();
			}

			function updateResults() {
				const total = Object.values(votes).reduce((a, b) => a + b, 0);
				let html = '';

				Object.entries(votes).forEach(([option, count]) => {
					const percent = total ? (count / total * 100).toFixed(1) : 0;
					html += `
                    <div>${option}: ${count} 票 (${percent}%)</div>
                    <div class="results-bar">
                        <div class="results-fill" style="width: ${percent}%"></div>
                    </div>
                `;
				});

				document.getElementById('voteResults').innerHTML = html;
			}
			// 留言板功能
			function submitMessage(event) {
				event.preventDefault();

				const author = document.getElementById('author').value;
				const content = document.getElementById('message').value;

				const newMessage = {
					author: author,
					content: content,
					time: new Date().toLocaleString()
				};

				messages.unshift(newMessage);
				localStorage.setItem('messages', JSON.stringify(messages));

				renderMessages();
				event.target.reset();
			}

			function renderMessages() {
				const container = document.getElementById('messagesContainer');
				container.innerHTML = messages.map(msg => `
                <div class="message-item">
                    <div class="message-author">${msg.author}</div>
                    <div class="message-content">${msg.content}</div>
                    <div class="message-time" style="color:#666; font-size:0.9em">${msg.time}</div>
                </div>
            `).join('');
			}

			// 初始化加载数据
			window.onload = function() {
				updateResults();
				renderMessages();
			}
		</script>
	</body>
</html>